<template>
	<view class="home hv100 bg-shop clearfix ">
		<cu-custom bgColor="bg-white" isBack>
			<view slot="content">我的收藏</view>
		</cu-custom>
		<view  class="wp100 flex align-center justify-between bg-white mt1 pb10">
			<view class="wp50 discenter">
				<view class="discenter f18 flex flex-direction align-center mt10" v-if="TabCur==0">
					<text>商品</text>
					<view class="block68-9 mt5"></view>
				</view>
				<view class="discenter f18 flex flex-direction align-center mt10" v-else @click="pushtab">
					<text>商品</text>
					<view class="nochoice mt5" ></view>
				</view>
			</view>
			<view class="wp50 discenter">
				<view class="discenter f18 flex flex-direction align-center mt10" v-if="TabCur==1">
					<text>店铺</text>
					<view class="block68-9 mt5"></view>
				</view>
				<view class="discenter f18 flex flex-direction align-center mt10" v-else @click="pushtabs">
					<text>店铺</text>
					<view class="nochoice mt5"></view>
				</view>
			</view>
		</view>
		<view class="flex flex-direction" v-if="TabCur==0">
			<view v-for="(item,index) in goods" class="wp100 mt5 flex flex-direction px15 bg-white box-shadow radius-5"  :key="index" >
				<view class="flex align-center py15" @click="pushPage('/pages/goods/index?id='+item.goodsId)">
					<image :src="item.pic" class="block100" mode=""></image>
					<view class="flex flex-direction goods-boxs ml10 h100 justify-between">
						<view class="ellipsis3 goods-boxs-text">{{item.name}}</view>
						<view class="flex align-center justify-between">
							<text class="text-prices">￥{{item.money}}</text>
							<image src="/static/home/add.png" mode="" class="block25"></image>
						</view>
					</view>
				</view>
				<view class="mt1 py10 flex align-center justify-end  text-prices bt1" @click="delgoods(item,index)">取消收藏</view>
			</view>
		</view>
		<view class="flex flex-direction" v-else>
			<view class="wp100 mt5 flex flex-direction px15 bg-white box-shadow radius-5" v-for="(item,index) in stores" :key="index" >
				<view class="flex align-center py15" @click="pushPage('/pages/store/index?id='+item.storeId+'&address='+item.distance)">
					<image class="block45 round" :src="item.pic"></image>
					<view class="flex flex-direction ml10 justify-between h45 block-box">
						<view class="ellipsis f16 fwb">{{item.storeName}}</view>
						<view class="flex align-center mt10 f12 text-info">
							<text>共{{item.num}}件商品</text>
							<text class="mx5">|</text>
							<text>{{item.people}}万人关注</text>
						</view>
					</view>
				</view>
				<view class="mt1 py10 flex align-center justify-end  text-prices bt1" @click="delstore(item,index)">取消收藏</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			id:'',
			title:['商品','店铺'],
			TabCur:1,
			goods:[
				
			],
			stores:[
				{
					pic:'/static/home/shangpin0.png',
					storeName:'益当当健康鞋业',
					money:"100",
					num:'1414',
					people:"1414"
				}
			],
			page:1,
			finish:false
		}
	},
	onLoad(e) {
		this.cgoods()
	},
	computed: {
		...mapState(['baseURL','userlnt','userlat'])
	},
	onReachBottom() {
		// if(this.TabCur==0){
		// 	this.cgoods()
		// }else{
		// 	this.cstore()
		// }
	},
	methods: {
		...mapActions(['setLocale']),
		async cgoods() {
			if (this.finish) return
			let {data} = await this.$http.post('user.collect', {type:0,page:this.page}, { tipConfig: { storeBlock: true } })
			this.finish = data.length < 10
			!this.finish && (this.page += 1)
			this.goods = [...this.goods, ...data]
		},
		async cstore() {
			if (this.finish) return
			let {data} = await this.$http.post('user.collect', {type:1,page:this.page,lnt:this.userlnt,lat:this.userlat}, { tipConfig: { storeBlock: true } })
			this.finish = data.length < 10
			!this.finish && (this.page += 1)
			this.stores = [...this.stores, ...data]
		},
		cleargoods(){
			this.page=1
			this.finish=false
			this.goods=[]
		},
		async delgoods(item,index){
			let { data } = await this.$http.post('good.collect', {goodsId:item.goodsId}, { tipConfig: { storeLoading: true, isSuccessTip: true } })
			this.cleargoods()
			this.cgoods()
		},
		clearstore(){
			this.page=1
			this.finish=false
			this.stores=[]
		},
		async delstore(item,index){
			let { data } = await this.$http.post('store.collect', { storeId: item.storeId }, { tipConfig: {storeLoading: true, isSuccessTip: true  } })
			this.clearstore()
			this.cstore()
		},
		pushtab() {
			if(this.TabCur==0){
				return false
			}else{
				this.TabCur=0
				// this.clearstore()
				// this.cgoods()
			}
		},
		pushtabs() {
			if(this.TabCur==1){
				return false
			}else{
				this.TabCur=1
				// this.cleargoods()
				// this.cstore()
			}
		}
	}
}
</script>
<style lang="less">
.block100{
	width: 200rpx;
	height: 200rpx;
}
.block68-9{
	width: 68rpx;
	height: 9rpx;
	background-color: #FF261B;
}
.nochoice{
	width: 68rpx;
	height: 9rpx;
	background-color: #FFFFFF;		
}
.goods-boxs{
	width: calc(100% - 240rpx);
}
.goods-boxs-text{
	width: calc(100% - 30rpx);
}
.h100{
	height: 200rpx;
}
.wp50{
	width: 50%;
}
.block75{
	width: 150rpx;
	height: 150rpx;
}
.shop-live{
	width: 24rpx;
	height: 28rpx;
}
.h75{
	height: 150rpx;
}
.blcok-live{
	width: 130rpx;
	height: 50rpx;
	background-image: linear-gradient(to top, #FE4725, #FF8463) !important;
	border-radius: 10rpx;
}
.block-box{
	width: calc(100% - 170rpx);
}
.class-address{
	width: 26rpx;
	height: 27rpx;
}
</style>
